<template>
  <div class="continter" v-loading="pageData.loading" @click="contclick">
    <div
      class="box"
      v-for="(value, key, index) in option"
      :key="index"
      @contextmenu.prevent="showContextMenu($event, key)"
    >
      <el-icon v-if="!option[key]" class="plus" @click="addPlue(key)"><CirclePlus /></el-icon>
      <component :is="option[key]"></component>
    </div>
    <el-dialog v-model="pageData.printVisibel" title="选择报表" width="800">
      <div style="width: 100%; height: 500px">
        <encapsulation-agrid ref="refgridOption" :configaggrid="configaggrid"></encapsulation-agrid>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="verify"> 确定</el-button>
        </span>
      </template>
    </el-dialog>
    <button
      class="delete-button"
      v-if="pageData.showMenu"
      :style="{
        top: pageData.contextMenuPosition.top - 90 + 'px',
        left: pageData.contextMenuPosition.left - 296 + 'px',
      }"
      @click="deleteItem"
      >删除</button
    >
  </div>
</template>
  
  <script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { post, get } from '@/api/http'
import * as echarts from 'echarts/core'
import DismantlingMachineRepairEfficiency from './components/DismantlingMachineRepairEfficiency.vue'
import SingleSidedMachine from './components/SingleSidedMachine.vue'
import DoubleSidedMachine from './components/DoubleSidedMachine.vue'
import RibbingMachine from './components/RibbingMachine.vue'
import ChartOfTheWorkingRateOfEachTextileFactory from './components/ChartOfTheWorkingRateOfEachTextileFactory.vue'
import AttritionRateChart from './components/AttritionRateChart.vue'
import OrderFulfillmentrate from './components/OrderFulfillmentrate.vue'
import RealTimeWIP from './components/RealTimeWIP.vue'
import RawYarnStock from './components/RawYarnStock.vue'
import MonthlyOutputOfTheWeavingPlant from './components/MonthlyOutputOfTheWeavingPlant.vue'
import DailyOutputOfTheWeavingPlant from './components/DailyOutputOfTheWeavingPlant.vue'
import ShiftOutput from './components/ShiftOutput.vue'
import GreyFabricStock from './components/GreyFabricStock.vue'
const option = reactive<any>({
  chart1: '',
  chart2: '',
  chart3: '',
  chart4: '',
  chart5: '',
  chart6: '',
  chart7: '',
  chart8: '',
  chart9: '',
})
interface Pagein {
  printVisibel: boolean
  showMenu: boolean
  contextMenuPosition: any
  delName: any
  loading: boolean
}
let pageData = reactive<Pagein>({
  printVisibel: false, //弹窗
  showMenu: false,
  contextMenuPosition: {},
  delName: '',
  loading: false,
})
//表格
let refgridOption = ref<any>()
//echartsID
const chartId = ref<any>()
const chartKey = ref<any>()
//添加
const addPlue = (id: any, key: any) => {
  chartId.value = id
  chartKey.value = key
  pageData.printVisibel = true
  nextTick(() => {
    refgridOption.value.setdataListIterface([
      {
        name: '单面机运行效率',
        menu: '机台效率',
        commentsId: SingleSidedMachine,
      },
      {
        name: '双面机运行效率',
        menu: '机台效率',
        commentsId: DoubleSidedMachine,
      },
      {
        name: '罗纹机运行效率',
        menu: '机台效率',
        commentsId: RibbingMachine,
      },
      // {
      //   name: '各织厂在岗率走势图',
      //   menu: '厂部在岗率',
      //   commentsId: ChartOfTheWorkingRateOfEachTextileFactory,
      // },
      // {
      //   name: '织厂流率走势图',
      //   menu: '厂部人员流失率',
      //   commentsId: AttritionRateChart,
      // },
      {
        name: '订单准交率',
        menu: '订单准交率',
        commentsId: OrderFulfillmentrate,
      },
      {
        name: '织厂WIP',
        menu: '实时WIP',
        commentsId: RealTimeWIP,
      },
      {
        name: '厂辅助工(拆纱卸纱机修)效率',
        menu: '拆纱卸纱机修效率',
        commentsId: DismantlingMachineRepairEfficiency,
      },

      {
        name: '厂外加工原料库存走势图',
        menu: '原纱库存',
        commentsId: RawYarnStock,
      },
      {
        name: '织厂年产量',
        menu: '织厂产量',
        commentsId: MonthlyOutputOfTheWeavingPlant,
      },
      {
        name: '班组年产量',
        menu: '班组产量',
        commentsId: ShiftOutput,
      },
      {
        name: '厂坯布库存走势图',
        menu: '坯布库存',
        commentsId: GreyFabricStock,
      },
    ])
  })
}
//确认
const verify = () => {
  let selsetionList = refgridOption.value.getSelectedRows()
  if (selsetionList.length == 0) {
    ElMessage.warning('请选择您要添加的报表')
    return
  }
  pageData.loading = true
  post({
    url: 'admin/acl/chart/updateChart',
    data: {
      chart: chartId.value,
      componetName: selsetionList[0].commentsId.name,
    },
  })
    .then((res: any) => {
      if (res.code == 200) {
        option[chartId.value] = selsetionList[0].commentsId
        pageData.printVisibel = false
      } else {
        ElMessage.error(res.message)
      }
      pageData.loading = false
    })
    .finally(() => {
      pageData.loading = false
    })
}
const showContextMenu = (event: any, name: any) => {
  if (!option[name]) return
  event.preventDefault()
  pageData.contextMenuPosition = { left: event.clientX, top: event.clientY }
  pageData.delName = name
  pageData.showMenu = true
}
const deleteItem = () => {
  pageData.loading = true
  post({
    url: 'admin/acl/chart/updateChart',
    data: {
      chart: pageData.delName,
      componetName: '',
    },
  })
    .then((res: any) => {
      if (res.code == 200) {
        option[pageData.delName] = ''
        pageData.showMenu = false
      } else {
        ElMessage.error(res.message)
      }
      pageData.loading = false
    })
    .finally(() => {
      pageData.loading = false
    })
}
let configaggrid = ref({
  url: '', //接口路径
  queryData: {},
  paginationShow: false, //分页是否显示
  invokeiIterface: false, //是否调用接口
  rowMultiSelectWithClick: false, //点击行是否多选
  column: [
    {
      headerCheckboxSelection: true,
      checkboxSelection: true,
      width: 50,
      showDisabledCheckboxes: false,
      pinned: 'left',
    },
    {
      headerName: '菜单',
      field: 'menu',
      width: 200,
    },
    {
      headerName: '表图名称',
      field: 'name',
      width: 300,
    },
  ],
})

const getList = () => {
  pageData.loading = true
  post({
    url: 'admin/acl/chart/findChart',
  })
    .then((res: any) => {
      if (res.code == 200) {
        console.log(res.data)
        for (let key in res.data) {
          if (res.data[key] == 'DismantlingMachineRepairEfficiency') {
            option[key] = DismantlingMachineRepairEfficiency
          }
          if (res.data[key] == 'SingleSidedMachine') {
            option[key] = SingleSidedMachine
          }
          if (res.data[key] == 'DoubleSidedMachine') {
            option[key] = DoubleSidedMachine
          }
          if (res.data[key] == 'RibbingMachine') {
            option[key] = RibbingMachine
          }
          if (res.data[key] == 'ChartOfTheWorkingRateOfEachTextileFactory') {
            option[key] = ChartOfTheWorkingRateOfEachTextileFactory
          }
          if (res.data[key] == 'OrderFulfillmentrate') {
            option[key] = OrderFulfillmentrate
          }
          if (res.data[key] == 'RealTimeWIP') {
            option[key] = RealTimeWIP
          }
          if (res.data[key] == 'RawYarnStock') {
            option[key] = RawYarnStock
          }
          if (res.data[key] == 'MonthlyOutputOfTheWeavingPlant') {
            option[key] = MonthlyOutputOfTheWeavingPlant
          }
          if (res.data[key] == 'DailyOutputOfTheWeavingPlant') {
            option[key] = DailyOutputOfTheWeavingPlant
          }
          if (res.data[key] == 'ShiftOutput') {
            option[key] = ShiftOutput
          }
          if (res.data[key] == 'GreyFabricStock') {
            option[key] = GreyFabricStock
          }
        }
      } else {
        ElMessage.error(res.message)
      }
      pageData.loading = false
    })
    .finally(() => {
      pageData.loading = false
    })
}
const contclick = () => {
  pageData.showMenu = false
}
onMounted(async () => {
  let { data } = await post({
    url: '/admin/acl/user/findUserToken',
  })
  console.log(data)
  localStorage.setItem('firmId', data.data.firmId)
  getList()
})
</script>
  <style scoped>
.continter {
  background: #f8f8f8;
  height: 100%;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
}
.box {
  width: 32%;
  height: 32%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.plus {
  font-size: 30px;
  cursor: pointer;
  position: absolute;
}
.delete-button {
  position: absolute;
  z-index: 9999;
  padding: 5px 10px;
  font-size: 14px;
  background-color: #ff0000;
  color: #fff;
  border: none;
  cursor: pointer;
}
.chart {
  width: 100%;
  height: 100%;
}
</style>